<template>
	<view>
		<!-- 住院登记记录 -->
		<UserInfoCardVue></UserInfoCardVue>
		<view class="pad-16r bg-white">
			<view class="title">
				就诊人信息
			</view>
			<view class="tform">
				<view class="tform-item">
					<view class="value flex">
						<view class="xin">*</view>
						<view>证件类型</view>
					</view>
					<picker @change="bindPickerChangeCertType" :range="listCertType" :value="form.certIdIndex"
						range-key="label">
						<view class="uni-input"
							:style="{color: form.certTypeLabel === undefined ? 'rgba(0, 0, 0, 0.24)' : ''}">
							{{form.certTypeLabel || '请选择证件类型'}} &gt;
						</view>
					</picker>
				</view>
				<view class="tform-item flex-between">
					<view class="value flex">
						<view class="xin">*</view>
						<view>证件号码</view>
					</view>
					<input type="text" class="text-zjhm" maxlength="18" v-model="form.certId" placeholder="请填写就诊人证件号码"
						@blur="getSexBarth" />
					<view class="btn-zjsb">
						证件识别
					</view>
				</view>
				<view class="tform-item">
					<view class="value flex">
						<view class="xin">*</view>
						姓名
					</view>
					<input type="text" v-model="form.patName" placeholder="请输入姓名" />
				</view>
				<view class="tform-item">
					<view class="value flex">
						<view class="xin">*</view>
						性别
					</view>
					<picker @change="bindPickerChangeSex" range-key="label" :value="form.sexIndex" :range="listSex">
						<view class="uni-input"
							:style="{color: form.patSexLabel === undefined ? 'rgba(0, 0, 0, 0.24)' : ''}">
							{{form.patSexLabel || '请选择性别'}} &gt;
						</view>
					</picker>
				</view>
				<view class="tform-item">
					<view class="value flex">
						<view class="xin">*</view>
						出生日期
					</view>
					<picker @change="bindPickerChangeBirthday" mode="date">
						<view class="uni-input"
							:style="{color: form.patBirthDate === undefined ? 'rgba(0, 0, 0, 0.24)' : ''}">
							{{form.patBirthDate || '请选择出生日期'}} &gt;
						</view>
					</picker>
				</view>
				<view class="tform-item">
					<view class="value flex">
						<view class="xin">*</view>
						民族
					</view>
					<picker @change="bindPickerChangeNation" range-key="label" :value="form.nationIndex"
						:range="listNation">
						<view class="uni-input"
							:style="{color: form.nation === undefined ? 'rgba(0, 0, 0, 0.24)' : ''}">
							{{form.nationLabel || '请选择民族'}} &gt;
						</view>
					</picker>
				</view>
				<view class="tform-item">
					<view class="value flex">
						<view class="xin">*</view>
						联系地址
					</view>
					<pick-regions :defaultRegion="defaultRegionCode" @getRegion="handleGetRegion">
						<view class="uni-input"
							:style="{color: form.province === undefined ? 'rgba(0, 0, 0, 0.24)' : ''}">
							{{regionName || '点击选择省市区'}} &gt;
						</view>
					</pick-regions>
				</view>
				<view class="tform-item">
					<view class="value flex">
						<view class="xin">*</view>
						详细地址
					</view>
					<input type="text" v-model="form.patAddress" placeholder="请输入街道、小区、门牌号等" />
				</view>
				<view class="tform-item" style="border: none;">
					<view class="value flex">
						<view class="xin">*</view>
						手机号码
					</view>
					<input type="number" maxlength="11" v-model="form.patPhone" placeholder="请输入手机号" />
				</view>
				<view class="tform-item" style="border: none;">
					<view class="value flex">
						<view class="xin">*</view>
						就诊人关系
					</view>
					<picker @change="bindPickerChangeRelationShip" range-key="label" :value="form.relationShip"
						:range="listRelationShip">
						<view class="uni-input"
							:style="{color: form.relationShip === undefined ? 'rgba(0, 0, 0, 0.24)' : ''}">
							{{form.relationShip || '请选择就诊人关系'}} &gt;
						</view>
					</picker>
				</view>
			</view>
		</view>
		<view v-if="current==1">

			<view>
				<view class="title">
					监护人信息
				</view>
				<view class="tform">
					<view class="tform-item">
						<view class="value flex">
							<view class="xin">*</view>
							监护人
						</view>
						<input type="text" v-model="form.guardian" placeholder="请输入监护人姓名" />
					</view>
					<view class="tform-item">
						<view class="value flex">
							<view class="xin">*</view>
							<view>监护人证件类型</view>
						</view>
						<picker @change="bindPickerChangeGuardianCertType" :range="listCertType" range-key="label">
							<view class="uni-input"
								:style="{color: form.guardianCreType === undefined ? 'rgba(0, 0, 0, 0.24)' : ''}">
								{{form.guardianCreTypeLabel || '请选择监护人证件类型'}} &gt;
							</view>
						</picker>
					</view>
					<view class="tform-item flex-between">
						<view class="value flex">
							<view class="xin">*</view>
							<view>监护人证件号码</view>
						</view>
						<input type="text" class="text-zjhm" maxlength="18" v-model="form.guardianCreNo"
							placeholder="请填写监护人证件号码" />
					</view>
					<view class="tform-item" style="border: none;">
						<view class="value flex">
							<view class="xin">*</view>
							监护人手机号码
						</view>
						<input type="number" class="guardian-phone" maxlength="11" v-model="form.patPhone"
							placeholder="请输入手机号" />
					</view>
				</view>
			</view>
		</view>
		<ButtonVue content="提交登记信息" @click="checkInfo"></ButtonVue>
		<Dialog :show="showUpdateDialog" @confirm="confirm" @close="showUpdateDialog=false" title="温馨提示"
			:mask-close-able="true">
			<view class="slot-content">
				确定修改当前信息？
			</view>
		</Dialog>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import UserInfoCardVue from '../../../components/UserInfo/UserInfoCard.vue';
	import ButtonVue from '../../../components/Button/Button.vue';
	import DialogVue from '../../../components/Dialog/Dialog.vue';
	import {
		listNation
	} from '../../../utils/listNation';
	import {
		listRelationShip
	} from '../../../utils/listRelationShip';
	import {
		listSex
	} from '../../../utils/listSex';
	import {
		listCertType
	} from '../../../utils/listCertType';
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	import {
		address
	} from '../../../utils/listAddress';
	import {
		getYearsBetweenDates
	} from '../../../utils/assist';
	import {
		phoneReg,
		cardReg,
		idCard
	} from '@/common/js/reg.js'
	import {
		updateRecord
	} from '../../../api/patientCard';
	export default {
		components: {
			UserInfoCardVue,
			ButtonVue,
			DialogVue
		},
		computed: {
			...mapGetters(['userId', 'userInfo', 'userList']),
			regionName() {
				// 转为字符串
				return this.region.map(item => item.name).join('-')
			},
			regionNameKid() {
				// 转为字符串
				return this.region.map(item => item.name).join('-')
			}
		},
		data() {
			return {
				form: {},
				region: [],
				nationLabel: "",
				defaultRegionCode: '510107',
				listRelationShip,
				listNation,
				certTypeLabel: '',
				sex: '',
				current: 0,
				listSex,
				listCertType,
				showUpdateDialog: false,
			}
		},
		mounted() {
			this.form = {
				...this.userInfo
			}
			this.setCertId(this.form.certType)
			this.setSex(this.form.patSex)
			this.setNation(this.form.nation)
			this.setDefaultRegionCode(this.form)
			console.log(this.form)
		},
		methods: {
			bindPickerChangeCertType(e) {
				this.setCertId(e.detail.value)
			},
			bindPickerChangeSex(e) {
				this.setSex(e.detail.value)
			},
			bindPickerChangeNation(e) {
				this.setNation(e.detail.value)
			},
			handleGetRegion(region) {
				this.region = region
				this.form.province = this.region[0].name
				this.form.city = this.region[1].name
				this.form.district = this.region[2].name
			},
			setCertId(certType) {
				let certIdIndex = this.listCertType.findIndex(item =>
					item.value === certType
				)
				if (certIdIndex != -1) {
					this.form.certTypeLabel = this.listCertType[certIdIndex].label
					this.form.certTypeName = this.listCertType[certIdIndex].label
					this.form.certType = this.listCertType[certIdIndex].value
					this.form.certIdIndex = certIdIndex
				}
			},
			setSex(value) {
				let certIdIndex = this.listSex.findIndex(item =>
					item.value === value
				)
				if (certIdIndex != -1) {
					this.form.patSexName = this.listSex[certIdIndex].label
					this.form.patSexLabel = this.listSex[certIdIndex].label
					this.form.patSex = this.listSex[certIdIndex].value
					this.form.sexIndex = certIdIndex
				}
			},
			setNation(value) {
				let nationIndex = this.listNation.findIndex(item => item.value === value);
				if (nationIndex != -1) {
					this.form.nationLabel = this.listNation[nationIndex].label
					this.form.nation = this.listNation[nationIndex].value
					this.form.nationIndex = nationIndex
				}
			},
			setDefaultRegionCode(form) {
				this.region.push({
					// code: '51',
					name: form.province
				})
				this.region.push({
					// code: '5101',
					name: form.city
				})
				this.region.push({
					// code: '510107',
					name: form.district
				})
				// let province = this.address.findIndex(item => item.value === value);
				// this.defaultRegionCode = ''
			},
			checkInfo() {
				let userCard = this.form.certId
				if (!cardReg.test(userCard)) {
					this.$u.toast('身份证格式不正确')
					return;
				}
				// 判断当前身份证是否已经创建，如果创建，则提示不能再次创建
				// 通过当前身份证和userList里面的身份证进行比较即可

				let year = userCard.substring(6, 10);
				let month = userCard.substring(11, 12);
				let day = userCard.substring(13, 14);
				let bir = new Date(year + "-" + month + "-" + day);
				let age = getYearsBetweenDates(new Date(), new Date(bir));
				if (age < 6 && this.current == 0) {
					this.$u.toast('该身份证为儿童请创建儿童就诊卡')
					return;
				}
				if (age >= 6 && this.current == 1) {
					this.$u.toast('该身份证为成年人请创建成人就诊卡')
					return;
				}
				if (!this.form.certType) return this.$u.toast('请选择证件类型')
				if (!this.form.certId) return this.$u.toast('请输入就诊人证件号码')
				if (!this.form.patName) return this.$u.toast('请输入姓名')
				if (!this.form.patSex) return this.$u.toast('请选择性别')
				if (!this.form.patBirthDate) return this.$u.toast('请选择出生日期')
				if (!this.form.nation) return this.$u.toast('请选择民族')
				if (!this.form.province) return this.$u.toast('请选择省')
				if (!this.form.city) return this.$u.toast('请选择市')
				if (!this.form.district) return this.$u.toast('请选择区')
				if (!this.form.patAddress) return this.$u.toast('请输入详细地址')

				if (this.form) {
					if (!idCard.test(this.form.certId)) {
						this.$u.toast('请填写正确的身份证号');
						return
					}
					if (!phoneReg.test(this.form.patPhone)) {
						this.$u.toast('请填写正确的手机号码');
						return
					}
				}
				if (this.current == 1) {
					if (!this.form.guardian) return this.$u.toast('请输入监护人姓名')
					if (!this.form.guardianCreType) return this.$u.toast('请输入监护人证件类型')
					if (!this.form.guardianCreNo) return this.$u.toast('请输入监护人身份证号码')
				}

				this.showUpdateDialog = true;
			},
			confirm() {
				updateRecord(this.form).then(res => {
					this.$refs.uToast.show({
						title: '修改成功',
						type: 'success',
						url: '/pages/Home/ServeHospital/InHospitalRegister'
					})
					this.showUpdateDialog = false
					
				})

			}
		}
	}
</script>

<style scoped>
	.guardian-phone {
		width: 150px;
	}

	.title {
		border-left: 4px solid blue;
		margin: 10px;
		padding: 0 10px;
	}

	uni-input {
		text-align: right;

		.uni-input-placeholder {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28upx;
			color: rgba(0, 0, 0, 0.24);
		}
	}

	.btn-box {
		display: flex;
		justify-content: space-around;
		align-items: center;


		.btn {
			width: 80%;
			height: 64upx;
			background: $theme-color;
			border-radius: 64upx;
			text-align: center;
			line-height: 64upx;
			color: #FFF;
			background-color: rgb(112, 222, 230);

			&:nth-child(0) {
				background-color: transparent;
				border: 1px solid $theme-color;
				color: $theme-color;
			}
		}
	}

	.img {
		width: 66upx;
		height: 66upx;
		margin-right: 24upx;
	}

	.flex {
		display: flex;
		align-items: center;
	}

	.flex-between {
		display: flex;
		justify-content: space-between;
	}

	.xin {
		color: red;
		text-align: center;
		font-size: 20px;
		height: 20px;
		padding: 0 5px;
	}

	.text-zjhm {
		width: 50%;
	}

	.btn-zjsb {
		border: 1px dashed blue;
		background-color: rgb(216, 230, 254);
		color: blue;
		padding: 0 10px;
	}
</style>